<!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->

<script setup lang="ts">
import { ref } from 'vue'

import CommonInlineEdit from '#desktop/components/CommonInlineEdit/CommonInlineEdit.vue'
import OrganizationPopoverWithTrigger from '#desktop/components/Organization/OrganizationPopoverWithTrigger.vue'
import UserPopoverWithTrigger from '#desktop/components/User/UserPopoverWithTrigger.vue'
import TicketInformationBadgeList from '#desktop/pages/ticket/components/TicketDetailView/TicketDetailTopBar/TopBarHeader/TicketInformation/TicketInformationBadgeList.vue'
import { useTicketEditTitle } from '#desktop/pages/ticket/components/TicketDetailView/TicketDetailTopBar/useTicketEditTitle.ts'
import { useTicketInformation } from '#desktop/pages/ticket/composables/useTicketInformation.ts'

interface Props {
  hideDetails?: boolean
}
const { ticket, ticketId } = useTicketInformation()

defineProps<Props>()

const isUpdatingTitle = ref(false)

const { updateTitle } = useTicketEditTitle(ticketId)
</script>

<template>
  <div
    v-if="ticket"
    class="grid grid-cols-[max-content_1fr] gap-4"
    :class="{ 'items-center gap-3': hideDetails }"
  >
    <div class="flex" :class="{ 'mt-1': !hideDetails }">
      <UserPopoverWithTrigger
        v-if="ticket.customer"
        class="h-min z-[11]"
        :avatar-config="{
          size: hideDetails ? 'medium' : 'normal',
        }"
        :user="ticket.customer"
      />
      <OrganizationPopoverWithTrigger
        v-if="ticket.organization"
        class="h-min ltr:-translate-x- z-10 ltr:-translate-x-1.5 rtl:translate-x-1.5"
        :avatar-config="{
          size: hideDetails ? 'medium' : 'normal',
        }"
        :organization="ticket.organization"
      />
    </div>

    <div class="grow basis-full">
      <div
        class="flex flex-col justify-center"
        :class="{
          'mb-3.5': !hideDetails,
        }"
      >
        <div v-if="!hideDetails" class="mb-1 flex items-center gap-1">
          <CommonLabel
            tag="p"
            class="flex items-center gap-1"
            :class="{
              'after:inline-block after:h-[.12rem] after:w-[.12rem] after:shrink-0 after:rounded-full after:bg-current':
                ticket.organization,
            }"
          >
            {{ ticket.customer.fullname }}
          </CommonLabel>
          <CommonLabel v-if="ticket.organization?.name">
            {{ ticket.organization?.name }}
          </CommonLabel>
        </div>

        <CommonInlineEdit
          v-model:editing="isUpdatingTitle"
          size="xl"
          required
          block
          :disabled="!ticket.policy.update || hideDetails"
          :value="ticket.title"
          :classes="{
            label: hideDetails
              ? 'dark:text-white font-medium line-clamp-1'
              : 'dark:text-white font-medium line-clamp-4',
            input: 'dark:text-white font-medium',
          }"
          :label-attrs="{
            role: 'heading',
            'aria-level': '2',
          }"
          :label="$t('Edit ticket title')"
          @submit-edit="updateTitle"
        />
      </div>

      <TicketInformationBadgeList v-if="!hideDetails" />
    </div>
  </div>
</template>
